<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        #main{
            position: absolute;
            left: 50%;
            top: 50px;
            transform: translateX(-50%);
            margin: 0 auto;
            width: 40%;
            height:40px;
            padding: 0;
            /* background: pink; */

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        li{
            list-style: none;
            width: 60px;
            border-radius: 4px;
            border: 1px solid orchid;
            text-align: center;

        }

        .active{
            background-color: cadetblue;
        }


        body,html{
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        img{
            width: 100%;
            height: 100%;
        }

        
    </style>
</head>
<body>
    <ul id="main"></ul>

    <img src="" alt="暂无" id="img">

    <script>
        // 当前选中的月份
        let this_index = 0
        // 填充li
        let main = document.getElementById('main')
        let img = document.getElementById('img')
        // let monthArr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
        let monthArr = ['春','夏','秋','冬']
        let listStr = ''
        monthArr.map((item,index)=>{
            listStr += `<li index=${index} class=${index===this_index?'active':''}>${item}</li>`

            // let pic_src = require(``)

            // console.log(1111,pic_src)

            img.setAttribute('src','./images/1.jpeg') 
        })
        main.innerHTML = listStr



        var observedElements = document.querySelectorAll('li');
        // 月份点击事件
        main.addEventListener('click',(event)=>{
            this_index = Number(event.target.getAttribute('index'))
            observeLiClass(observedElements)
        })


        // 点击事件回调
        function observeLiClass(observedElements){
            observedElements&&observedElements.forEach((item,index)=>{
                if(index===this_index){
                    item.classList.add('active')
                    img.setAttribute('src',`./images/${this_index+1}.jpeg`)
                }else{
                    item.classList.remove('active')
                }
            })
        }



        


    </script>


    <script src="/socket.io/socket.io.js"></script>


    <script>
        const socket = io();
        socket.on('connect', () => {
            socket.emit('online', 'index');
        });


        socket.on('send_index', (data)=>{
            this_index = data
            observeLiClass(observedElements)
        })
        
    </script>
</body>
</html>